

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  // todo-item 组件现在接受一个
  // "prop"，类似于一个自定义 attribute。
  // 这个 prop 名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})


var vm = new Vue({
  el: "#app",
  data: {
    title: "you are here",
    name: "Trump",
    url: "https://www.youtube.com",
    classes: ["text-warning", "bg-primary", "p-2"],
    inputClasses: ["input-group", "input-group-lg"],
    wage: 10,
    coordinate: { x: 0, y: 0 },
    showName: true,
    showAge: false,
    age: 11,
    names: ['皮皮', 'Pi', '皮皮虾', '死鬼', '皮总'],
    dogs: [
      {name:'皮皮',gender:'female','age':'20 months'},
      {name:'老白',gender:'male','age':'10 years'},
      {name:'小白',gender:'male','age':'unknown'},
    ],
    rawHtml:'<b style="color:red">红色加粗</b>',
    isActived: true,
    groceryList: [
      {id:1,text:"跑步"},
      {id:2,text:"洗澡"},
      {id:3,text:"睡觉"}
    ],
    attr: "href",//动态绑定属性
    eventname:"click",//动态绑定事件
    
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar',

    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
    
  },

  created: function () {
    // `this` 指向 vm 实例，跟调用的作用域有关
    console.log('name is: ' + this.name);


    // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
    // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
    // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
    // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
    // 请参考：https://lodash.com/docs#debounce
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
      
      
  },

  computed: { //计算属性

    reversedName: function () {
      return this.name.split('').reverse().join('')  
    },
    lable: function () {
      return this.name + this.age
    },

    label2: {

      get() {
        return this.name + this.age + '@' + Date.now()
      },
      set() {
        console.log('Changed @' + Date.now())
        this.name += ' hack';
        
      }
    }

  },

  watch: { //侦听属性

    // name: function (val) {
    //   this.label = val + ' '+this.age
    // },
    // age: function (val) {
    //   this.label = this.name + ' ' + val
    // },
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    },

     // 如果 `question` 发生改变，这个函数就会运行
     question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }

  },

  methods: {
    greet(time) {
      return `Hello ${time} ${this.name}`;
    },
    changeWage(amount) {
      this.wage += amount;
    },
    logEvent(e) {
      console.log(e);
    },
    logCoors(e) {
      this.coordinate.x = e.offsetX;
      this.coordinate.y = e.offsetY;
    },
    updateName(e) {
      this.name = e.target.value;
    },
    logMessage() {
      console.log("hello world");
    },
    toggleShowName() {
      this.showName = !this.showName;
    },
    toggleShowAge() {
      this.showAge = !this.showAge;
    },
    doSomething() {
      console.log('doing sth');
    },
    getAnswer: function () {

      console.log('working on answer ...')
      if (this.question.indexOf('?') === -1) {
        this.answer = 'Questions usually contain a question mark. ;-)'
        return
      }
      this.answer = 'Thinking...'
      var vm = this
      axios.get('https://yesno.wtf/api')
        .then(function (response) {
          vm.answer = _.capitalize(response.data.answer)
        })
        .catch(function (error) {
          vm.answer = 'Error! Could not reach the API. ' + error
        })
    }

  },
});

//console.log(vm.$el,vm.$data)
//console.log(vm.$el === document.getElementById('app'))
console.log(vm.wage)
vm.$watch('wage', (newVal, oldVal) => console.log(this,`wage change from ${oldVal} to ${newVal}`))
vm.$watch('wage', function(newVal, oldVal) {
  console.log(this, `wage change from ${oldVal} to ${newVal}`)
  }
)

